<template>
    <div class="pages">
        <van-sticky>
            <div class="header">
                <div class="fls" @click="$router.back(-1)">
                    <img src="../../../static/images/icon-back.png" alt="">
                </div>
                <div class="centern">用户详情</div>
                <div class="fls"></div>
            </div>
        </van-sticky>
        <div class="inetbzsd">
            <div class="ruurtit">当前所在团队</div>
        </div>

        <div class="foreach">
            <div class="loister" style="margin-bottom:0">
                <div class="icontitle">
                    <img src="../../../static/images/icon-team.png" alt="">
                    <div>{{tbdetail.name}}</div>
                </div>

                <div class="commtering">
                    <div class="zuobian">
                        <div class="top_dow">
                            <div>团队长：{{tbdetail.administratorName}}</div>
                            <div>业务经理数量：{{tbdetail.totalMember}}</div>
                        </div>
                        <div class="bootoms">
                            <!-- 广东省-深圳市-龙华区 -->
                            {{tbdetail.busAddr}}
                        </div>
                    </div>
                    <div class="youbian">
                        <!-- <img src="../../../static/images/icon-arrow-black.png" alt=""> -->
                    </div>
                </div>
                <!-- 底部 -->
                <div class="botn_class">
                    <div class="zhifu" v-for="(items,index1) in tbdetail.businesses" :key="index1">
                        <!-- 支付宝 -->
                        <img v-if="items.businessType == 'AliPay'" src="../../../static/images/icon-zfb.png" alt="">
                        <!-- 微信 -->
                        <img v-if="items.businessType == 'WeChatPay'" src="../../../static/images/icon-wzzf.png" alt="">
                        <!-- 云闪付 -->
                        <img v-if="items.businessType == 'unionPay'" src="../../../static/images/icon-ysf.png" alt="">
                        <div>{{items.value}}%</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="inetbzsd">
            <div class="ruurtit">选择要划拨的团队</div>
        </div>

        <div class="foreach inbengs">
            <div class="loister" :class="activese == index ? 'loisteractive' : '' " v-for="(item,index) in teamsList" :key="index" @click="pending_Name(index,item.id)">
                <div class="icontitle">
                    <img src="../../../static/images/icon-team.png" alt="">
                    <div>{{item.name}}</div>
                </div>

                <div class="commtering">
                    <div class="zuobian">
                        <div class="top_dow">
                            <div>团队长：{{item.administratorName}}</div>
                            <div>业务经理数量：{{item.totalMember}}</div>
                        </div>
                        <div class="bootoms">
                            {{item.agency.busAddr}}
                        </div>
                    </div>
                    <div class="youbian">
                        <!-- <img src="../../../static/images/icon-arrow-black.png" alt=""> -->
                    </div>
                </div>
                <!-- 底部 -->
                <div class="botn_class">
                    <div class="zhifu" v-for="(items,index1) in item.businesses" :key="index1">
                        <!-- 支付宝 -->
                        <img v-if="items.businessType == 'AliPay'" src="../../../static/images/icon-zfb.png" alt="">
                        <!-- 微信 -->
                        <img v-if="items.businessType == 'WeChatPay'" src="../../../static/images/icon-wzzf.png" alt="">
                        <!-- 云闪付 -->
                        <img v-if="items.businessType == 'unionPay'" src="../../../static/images/icon-ysf.png" alt="">
                        <div>{{items.value}}%</div>
                    </div>
                </div>
            </div>
        </div>
            <div class="niceckead">
                <van-button type="primary"  color="#3288FF"  @click="close()" block>确定</van-button>
                <!-- <div class="isok" @click="close()">确定</div> -->
            </div>
    </div>
</template>

<script>
import Vue from 'vue'
import { Toast } from 'vant';
import api from '../../api/managemenTteam'
Vue.prototype.$api = api
export default {
    beforeCreate () {
        document.querySelector('body').setAttribute('style', 'background:#f5f5f5')
    },
    data(){
        return{
            tuanduiid:'', //选择的团队id
            activese:0,
            Team:this.$route.params.Team,
            tbdetail:{},
            teamsList:[],
        }
    },
    mounted(){
        this.teams();
        this.detail();
        console.log(this.Team)
    },
    methods:{
        // 团队详情 当前所在团队
        detail(){
            // let data = {
            //     id:this.id
            // }
            this.$api.teamsxiangqi(this.Team.agencyTeam.id).then((res)=>{
                console.log(res)
                if(res.status == '0000'){
                    this.tbdetail = res.payload
                }else{

                }
            })
        },
        // 团队管理?
        teams(){
            let data = {
                sort:'id,desc',
                page:0,
                size:9999
            }
            this.$api.teams(data).then((res)=>{
                console.log(res)
                if(res.status == '0000'){
                    this.teamsList = res.payload.content
                    if(res.payload.content != '' ){
                      this.tuanduiid = res.payload.content[0].id
                    }
                }
            })
        },
        pending_Name(index,id){
            this.activese = index
            this.tuanduiid = id //选择的团队id
        },

        // 确定划拨
        close(){
            let data = {
                memberId:this.Team.id,
                targetId:this.tuanduiid
            }
            this.$api.genghuan(data).then((res)=>{
                if(res.status == '0000'){
                    Toast('划拨成功');
                    setTimeout(()=>{
                        this.$router.go(-3)
                        // this.$router.push({ name: "Index" });
                    },1000)
                    // this.$router.push({ name: "Index" });
                }else{
                    Toast(res.describe);
                }
            })
        },
    }
}
</script>

<style scoped>
    .pages{
        width: 100%;
    }
    .header{
        width: 100%;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;
        box-sizing: border-box;
        background: #3288FF;
    }
    .header>.fls{
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .header>.fls>img{
        width: 100%;
        height: 100%;
    }
    .centern{
        color: #FFFFFF;
        font-family: OPPOSans;
        font-weight: medium;
        font-size: 17px;
        letter-spacing: 0px;
    }
    .inetbzsd{
        width: 100%;
        padding: 16px;
        box-sizing: border-box;
    }

    .ruurtit{
        color: #333333;
        font-family: OPPOSans;
        font-weight: medium;
        font-size: 16px;
        letter-spacing: 0px;
    }






    .foreach{
        width: 100%;
        padding: 0 16px;
        box-sizing: border-box;
    }
    .inbengs{
        width: 100%;
        padding-bottom: 60px !important;
        margin-bottom: 60px;
    }

    .loister{
        width: 100%;
        padding: 16px 16px 0 16px;
        box-sizing: border-box;
        border-radius: 4px;
        background: #FFFFFF;
        margin-bottom: 16px;
        border: 1px solid #ffff;
    }
    .loisteractive{
        border: 1px solid #3288FF !important;
        background: #EEF5FF !important;
    }

    .icontitle{
        display: flex;
        align-items: center;
        color: #333333;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 15px;
        letter-spacing: 0px;
    }
    .icontitle>img{
        width: 24px;
        height: 24px;
        margin-right: 8px;
    }

    .commtering{
        width: 100%;
        margin-top: 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .commtering>.zuobian{
        width: 85%;
    }

    .top_dow{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #828282;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 14px;
        letter-spacing: 0px;
    }
    .bootoms{
        width: 100%;
        margin-top: 12px;
        color: #828282;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 14px;
        letter-spacing: 0px;
    }
    .youbian{
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .youbian>img{
        width: 100%;
        height: 100%;
    }

    .botn_class{
        width: 100%;
        height: 40px;
        border-top: 1px solid #F2F2F2;
        display: flex;
        align-items: center;
        margin-top: 8px;
    }
    .zhifu{
        height: 100%;
        display: flex;
        align-items: center;
        margin-right: 27px;
        color: #828282;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 13px;
        letter-spacing: 0px;
    }
    .zhifu>img{
        width: 24px;
        height: 24px;
        margin-right: 4px;
    }

    .niceckead{
        width: 100%;
        /* margin-top: 40px; */
        padding: 0 16px;
        box-sizing: border-box;
        /* margin-bottom: 40px; */
        position: fixed;
        bottom: 4%;
    }
    .isok{
        width: 100%;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        background: #3288FF;
        color: #FFFFFF;
        font-family: OPPOSans;
        font-weight: medium;
        font-size: 16px;
        letter-spacing: 0px;
    }
</style>